<template>
	<view class="bg-white" style="position: fixed; top: 0; left: 0; z-index: 100;">
		<view class="vw-100 vh-70">
			<map type="gcj02" style="width: 100%; height: 100%;" @tap="pointtap" :scale="16" :latitude="markers[0].latitude"
				:longitude="markers[0].longitude" :markers="markers">
			</map>
		</view>
		<view class="vw-100 vh-30 flex flex-direction justify-between">
			<view>
				<view class="padding-sm">
					点击上面地图可以选择地址
				</view>
				<view class="padding-sm flex justify-between">
					<view class="title">区域：</view>
					<view>
						<text class="" v-if="md.pcode">{{locamap.cmap[md.pcode].criname}}</text>
						<text class="" v-if="md.scode">{{locamap.cmap[md.scode].criname}}</text>
						<text class="" v-if="md.qcode">{{locamap.cmap[md.qcode].criname}}</text>
					</view>
				</view>
				<view class="padding-sm flex flex-direction">
					<view class="padding-bottom-sm">详细地址：</view>
					<textarea class="solids padding-sm" style="height: 3em; width: 100%;" v-model="md.address" placeholder="请输入详细地址"></textarea>
				</view>
				<view class="padding-sm flex justify-between">
					<button style="background-color: #FFFFFF; color: #FE591F; width: 40%;" @click="cancel" class=" btn">取消</button>
					<button style="background-color: #FE591F; color: #FFFFFF; width: 40%;" @click="confirm" class=" btn">确定</button>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		props: {
			astore: {
				type: Object,
				default: function() {
					return {
						storeid: undefined,
						sname: undefined,
						jd: undefined,
						wd: undefined,
						pcode: undefined,
						scode: undefined,
						qcode: undefined,
						address: undefined
					};
				}
			},
		},
		data() {
			return {
				md: {},
				current: {
					latitude: 38.864701,
					longitude: 121.517699,
					iconPath: "https://yl-1346967611.cos.ap-beijing.myqcloud.com/location/person.png",
					height: 30,
					width: 30
				},
				markers: [],
				locamap: {}
			}
		},
		created: function() {
			this.md = this.astore;
			this.locamap = this.location.localmap;
			if (this.md.jd && this.md.wd) {
				this.markers.push({
					id: this.markers.length+1,
					latitude: this.md.wd,
					longitude: this.md.jd,
					iconPath: "https://yl-1346967611.cos.ap-beijing.myqcloud.com/location/md.png",
					height: 30,
					width: 30,
					label: {
						content: this.md.sname
					}
				});
			}
			
			this.loadLocation();
		},
		methods: {
			pointtap: function(e) {
				this.location.jwdToLocation(e.detail.latitude, e.detail.longitude).then(res => {
					if (res.ad_info.nation_code != 156) {
						this.message.error("请选择中国境内的地点");
						return;
					}
					if (res.ad_info.adcode == 999999) {
						this.message.error("这里不能选哦");
						return;
					}
					if (this.markers.length > 1) {
						this.markers.splice(1, this.markers.length - 1)
					}
					this.markers.push({
						id: this.markers.length+1,
						latitude: res.location.lat,
						longitude: res.location.lng,
						iconPath: "https://yl-1346967611.cos.ap-beijing.myqcloud.com/location/position.png",
						height: 30,
						width: 30
					});
					try {
						this.md.qcode = res.ad_info.adcode;
						this.md.scode = this.locamap.cmap[this.md.qcode].scode;
						this.md.pcode = this.locamap.cmap[this.md.scode].scode;
						
						if (res.formatted_addresses) {
							this.md.address = res.formatted_addresses.recommend;
						} else {
							this.md.address = res.address;
						}
						this.$forceUpdate();
					} catch (err) {
						this.message.error("这里不能选哦");
						return;
					}
					this.md.jd = res.location.lng;
					this.md.wd = res.location.lat;
					
				});
			},
			loadLocation: function() {
				this.location.loadLocation().then(res => {
					console.log(res);
					this.current.id = this.markers.length+1;
					this.current.latitude = res.latitude;
					this.current.longitude = res.longitude;
					this.markers.push(this.current);
				});
			},
			confirm: function() {
				this.$emit("change", this.md);
			},
			cancel: function() {
				this.$emit("close");
			}
		}
	}
</script>

<style scoped>
	.vw-100 {
		width: 100vw;
	}

	.vh-100 {
		height: 100vh;
	}
	
	.vh-70 {
		height: 70vh;
	}
	.vh-30 {
		height: 30vh;
	}
</style>